<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="/resources/css/ionicons.min.css">
    <style type="text/css">
		.header{height:44px;background-color:#fff;border-bottom:1px solid #ddd;width:100%;position:fixed;top:0;z-index:100;}
		.title{width:100%;text-align:center;font-size:15px;position:absolute;top:-6px;}
		.left-btn{position:absolute;left:0;top:0;font-size:14px;border:0;background-color:#fff;display:block;z-index:20;width:30px;height:43px;}
		.right-btn{position:absolute;right:6px;top:5px;font-size:14px;border:0;background-color:#fff;display:block;z-index:20;}
		.header{ z-index: 800; }
		.message_list { padding-left: 0; list-style: none; }
		.message_list > li { padding:10px 0 10px 5px; border-bottom: 1px solid #f3f3f3; height:80px; cursor: pointer; position: relative; }
		.message_list > li.active { background-color: #f3f3f3; }
		.message_list > li:hover{ background-color: #f3f3f3; }
		.message_list > li > img { width: 50px; height: 50px; border-radius: 3px; position: absolute; left:8px; top:15px; }
		.content { padding-left:68px; word-break: break-all; height: 65px; overflow: hidden; }
		.message-reply { color: #999; font-size: 12px; height: 30px; overflow: hidden; word-break: break-all; }
		.message-list-time { position: absolute; top:15px; right:8px; font-size:11px; color: #888;}
		
		#conversation{ margin-top: 25px; padding-bottom:45px; }
		#message-form { position:fixed;width:100%;bottom:0;background-color:#f7f7f7;padding:5px 65px 0px 5px;}
		.text-form { border:0;background-color:#fff;outline:none;width:100%;height:30px;padding-left:6px;padding-top:5px;resize:none;}
		.message { display:block; max-width:65%; margin-bottom:30px; position:relative;  padding: 10px 10px; background-color: #fff; border-radius: 11px;}
		.left.message .arrow { border-width: 0 13px 13px 0; }
		.left.message .arrow:after { border-width: 0 11px 11px 0; }
		.right.message .arrow { border-width: 13px 13px 0 0; }
		.right.message .arrow:after { border-width: 11px 11px 0 0; }
		.message .arrow, .message .arrow::after{ position: absolute; display: block; width: 0px; height: 0px; border-color: transparent; border-style: solid;}
		.left.message .arrow:after { bottom: -12px; left: 2px; border-right-color:#E5E5EA; border-left-width: 0px; content: ""; }
		.left.message .arrow { top: 14px; left:-8px; margin-top:-11px; border-right-color:#E5E5EA; border-left-width:0px; }
		.left.message .arrow:before { top:50%; left:-12px; margin-top:-11px; border-right-color:#E5E5EA; border-left-width:0px; }
		.right.message .arrow:after { top: -12px; right: -11px; border-top-color:#00D449; content: ""; }
		.right.message .arrow { top: 14px; right:-8px; margin-top:-11px; border-top-color:#00D449; }
		.right.message .arrow:before { top:50%; right:-11px; margin-top:-11px; border-right-color:#999; border-left-width:0px; }
		.message-content { white-space: pre-line; word-break: break-all; }
		.message-profile-image{ width:40px; height:40px; border-radius:3px; position: absolute; top:-25px; left: -55px; }
		.message-profile-name { position: absolute; top:-25px; left:0; font-weight: bold; white-space: nowrap; }
		.message.right { float: right; margin-right: 11px; background-color:#00D449; color:#fff; }
		.message.left { float: left; margin-left:55px; margin-top:25px; background-color: #E5E5EA; color:#000; }
		.message-time { position: absolute; bottom: -18px; font-size: 11px; color: #b4b4b4; width: 160px; }
		.message.right .message-time {text-align: right;}
		.right.message .message-time { right:0; }
		.left.message .message-time { left:0; }
		#message-more { text-align: center; color:#888; cursor: pointer; padding:7px 0; }
		.message-count { border-radius:20px; background-color: #f2dede; border-color: #ebccd1; color: #a94442; font-size: 12px; font-weight: bold; padding: 3px 7px; margin-left:6px; }
		
		.list_wrapper{ padding-top:44px; width: 100%; padding-bottom:50px; }
		.conversation_wrapper{ width: 100%; height:100%; display: none; }
		.write_wrapper{ display:none; width:100%; height:100%;}
		
		.alert{
			width:600px;
			position: fixed;
			z-index: 9999;
			left: 50%;
			margin-left:-300px;
			top: 10px;
			-webkit-transform: translateY(-120%);
			-o-transform: translateY(-120%);
			-moz-transform: translateY(-120%);
		    transform: translateY(-120%);
			-webkit-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
		}
		.alert.in{
			-webkit-transform: translateY(0);
			-o-transform: translateY(0);
			-moz-transform: translateY(0);
		    transform: translateY(0);
		}
		@media screen and (max-width: 768px){ .alert{width:90%; left:5%; margin:0;} }
		
		/* ionic style */
		button:focus,button:hover{outline: none;}
    </style>
</head>

<body>
	<div class="list_wrapper">
		<div class="header">
			<button onclick="history.back();" class="left-btn" style="color: #017AFC;"><i class="fa fa-chevron-left" style="font-size:16px;"></i></button>
			<h1 class="title"><spring:message code="head.message" text="메시지" /></h1>
			<button onclick="write_message();" class="right-btn"><i class="icon ion-compose" style="font-size:22px; color: #017AFC;"></i></button>
		</div>
		<c:if test="${!empty list}">
		<ul class="message_list">
			<c:forEach items="${list}" var="message">
				<c:choose>
					<c:when test="${message.member_one eq userDto.idx}"><c:set var="to_member_idx" value="${message.member_two}" /></c:when>
					<c:otherwise><c:set var="to_member_idx" value="${message.member_one}" /></c:otherwise>
				</c:choose>
				<li onclick="loadMessage(this, '${message.idx}', '${to_member_idx}')"><img src="/resources/upload/profile/thumbnail/${message.profileImage}"><span class="message-list-time">${fn:substring(message.time,0,10)}</span><p class="content"><span class="message-name">${message.name}</span>
				<c:if test="${message.count != '0'}"><span class="message-count">${message.count}</span></c:if><br><span class="message-reply">${message.reply}</span></p></li>
			</c:forEach>
		</ul>
		</c:if>
		<c:if test="${empty list}">
			<div style="text-align: center; padding:45px 0; color: #777;">메시지 목록이 없습니다</div>
		</c:if>
	</div>
	<div class="conversation_wrapper">
		<div class="header" id="message-top">
			<button onclick="message_back();" class="left-btn" style="color: #017AFC;"><i class="fa fa-chevron-left" style="font-size:16px;"></i>&nbsp;<spring:message code="head.message" text="메시지" /></button>
			<h1 class="title" id="name"></h1>
			<button onclick="deleteMessage();" class="right-btn"><i class="icon ion-trash-a" style="font-size:22px; color: #017AFC;"></i></button>
		</div>
		<div id="message-wrapper" style="padding-top:44px;width:99.7%;">
			<div id="message-more" onclick="more_message()"><i class="fa fa-comment"></i>&nbsp;이전대화 더보기</div>
			<div id="conversation"></div>
		</div>
		<form id="message-form">
			<input type="hidden" id="conversation_idx" name="conversation_idx">
			<input type="hidden" id="send" name="send" value="">
			<input type="hidden" id="member_two" name="member_two">
			<textarea rows="1" class="text-form" id="reply" name="reply" maxlength="1000" placeholder="메시지"></textarea>
			<button type="button" style="position:absolute;width:50px;right:5px;bottom:5px;border-radius:2px;background-color:#3C72CE;padding:5px 10px;border:0;color:#fff;font-size:12px;height:30px;" onclick="sendMessage(this)">전송</button>
		</form>
	</div>
	<div class="write_wrapper">
		<div class="header" id="write-top">
			<h1 class="title">새로운 메시지</h1>
			<button onclick="write_back();" class="right-btn" style="color: #017AFC;top:10px;">취소</button>
		</div>
		<div style="border-bottom: 1px solid #ddd; margin-top:44px; padding:10px 8px;background-color:#f7f7f7;width:100%;">받는 사람: <input type="text" id="receive-user" name="receive-user" style="border:0;background-color:#f7f7f7;outline:none;width:60%;"></div>
		<div style="position:fixed;width:100%;bottom:0;background-color:#f7f7f7;padding:5px 65px 0px 5px;">
			<textarea class="text-form" id="write-text" name="write-text" maxlength="1000" placeholder="새 메시지"></textarea>
			<button type="button" style="position:absolute;width:50px;right:5px;bottom:5px;border-radius:2px;background-color:#3C72CE;padding:5px 10px;border:0;color:#fff;font-size:12px;height:30px;" onclick="newMessage()">전송</button>
		</div>
	</div>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
<script src="/resources/js/jquery.autosize.min.js"></script>
<script type="text/javascript">
	var index=0;
	var messageCnt =0;
   	$(function(){
   		
   	});
   	
   	function message_back(){
   		$(".list_wrapper").fadeIn();
   		$(".conversation_wrapper").fadeOut();
   		$(".mobile-footer-menu").show();
   	}
   	
   	function write_back(){
   		$(".list_wrapper").fadeIn();
   		$(".write_wrapper").fadeOut();
   	}
   	
   	function write_message(){
   		$(".list_wrapper").fadeOut();
   		$(".write_wrapper").fadeIn();
   		$(".mobile-footer-menu").hide();
   		setTimeout(function(){$("#receive-user").focus();},500);
   	}
   	
   	function loadMessage(el, idx, member_two){
   		index = 0;
   		messageCnt= 0;
   		$(".mobile-footer-menu").hide();
   		$(el).find(".message-count").remove();
   		$("#conversation").empty();
   		$("#conversation_idx").val(idx);
   		$("#member_two").val(member_two);
   		$(".conversation_wrapper").fadeIn();
   		$(".list_wrapper").fadeOut();
   		$.ajax({
   		    type : "post"
   		    , url : "/getMessages?idx="+idx+"&index="+index
   		    , dataType : "json"
   		    , async : false
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	$("#name").html(response[0].name);
   		    	for(var i=0;i<response.length;i++){
   		    		var html = "";
   		    		var is_read = "읽지않음";
   		    		$("ul.message_list").children("li").each(function(){
   		    			if($(this).hasClass("active")){
   		    				$(this).find(".message-count").remove();	
   		    			}
   		    		});
   		    		if(response[i].is_read == "Y") is_read = "읽음";
   		    		if(response[i].from_member_idx == "${userDto.idx}"){
   		    			html += "<div class='message right'><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'><span style='margin-right:10px;'>"+is_read+"</span>"+response[i].time.substring(0,16)+"</div></div><div class='clearfix'></div>";
   		    		}else{
   		    			html += "<div class='message left'><img class='message-profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><div class='message-profile-name'>"+response[i].name+"</div><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'>"+response[i].time.substring(0,16)+"</div></div><div class='clearfix'></div>";
   		    		}
   		    		messageCnt++;
   		    		$("#conversation").prepend(html);
   		    	}
   		    	if(response.length < 10){
   		    		$("#message-more").hide();
   		    	}else{
   		    		$("#message-more").show();
   		    	}
   		    	setTimeout(function(){$("body").scrollTop($(document).height());},500);
   		    }
   		});
   	}
   	
   	function sendMessage(obj){
   		if($("#reply").val() == ""){
   			alertShow("danger","내용을 입력해 주세요", 2000);
   			return false;
   		}
   		var data = $("#message-form").serialize();
   		$.ajax({
   		    type : "post"
   		    , url : "/sendMessage"
   		    , data : data
   		    , dataType : "text"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	if(response == "execute"){
   		    		alertShow("success","전송되었습니다", 1200);
   		    		$("#conversation").append("<div class='message right'><div class='arrow'></div><div><p class='message-content'>"+$("#reply").val()+"</p></div><div class='message-time'>방금전</div></div><div class='clearfix'></div>");
   		    		$("body").scrollTop($(document).height());
   		    		$("#reply").val("");
   		    	}else{
   		    		alertShow("danger","다시 시도해 주세요", 2000);
   		    	}
   		    }
   		    , beforeSend: function(){
   		    	$(obj).attr("disabled","disabled").html("전송중...");
   		    }
   		    , complete : function(){
   		    	$(obj).removeAttr("disabled").html("전송");
   		    }
   		});
   	}
   	
   	function more_message(){
   		index +=10;
   		$.ajax({
   		    type : "post"
   		    , url : "/getMessages?idx="+$("#conversation_idx").val()+"&index="+index
   		    , dataType : "json"
   		    , timeout : 5000
   		    , error : function() {
   		    	alertShow("danger","다시 시도해 주세요", 2000);
   		    }
   		    , success : function(response) {
   		    	for(var i=response.length-1;i>-1;i--){
   		    		messageCnt++;
   		    		var html = "";
   		    		var is_read = "읽지않음";
   		    		$("ul.message_list").children("li").each(function(){
   		    			if($(this).hasClass("active")){
   		    				$(this).find(".message-count").remove();	
   		    			}
   		    		});
   		    		if(response[i].is_read == "Y") is_read = "읽음";
   		    		if(response[i].from_member_idx == "${userDto.idx}"){
   		    			html += "<div class='message right'><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'><span style='margin-right:10px;'>"+is_read+"</span>"+response[i].time.substring(0,16)+"</div></div><div class='clearfix'></div>";
   		    		}else{
   		    			html += "<div class='message left'><img class='message-profile-image' src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'><div class='message-profile-name'>"+response[i].name+"</div><div class='arrow'></div><div><p class='message-content'>"+response[i].reply+"</p></div><div class='message-time'>"+response[i].time.substring(0,16)+"</div></div><div class='clearfix'></div>";
   		    		}
   		    		
   		    		$("#conversation").prepend(html);
   		    	}
   		    	if(response.length < 10){
   		    		$("#message-more").hide();
   		    	}
   		    }
   		});
   	}
   	
   	function deleteMessage(){
   		if(confirm("대화내용을 삭제하시겠습니까?")){
   			$.ajax({
   	   		    type : "post"
   	   		    , url : "/deleteMessage?idx="+$("#conversation_idx").val()
   	   		    , dataType : "text"
   	   		    , timeout : 5000
   	   		    , error : function() {
   	   		    	alertShow("danger","다시 시도해 주세요", 2000);
   	   		    }
   	   		    , success : function(response) {
   	   		    	if(response == "execute"){
   	   		    		location.href= "/m_messages";
   	   		    	}else{
   	   		    		alertShow("danger","다시 시도해 주세요", 2000);
   	   		    	}
   	   		    }
   	   		});
   		}
   	}
   	
   	function newMessage(){
   		if($("#receive-user").val() == ""){
   			alertShow("danger","받는 사람 아이디를 입력해 주세요", 2000);
   		}else{
   			if($("#write-text").val() == ""){
   				alertShow("info","메시지 내용을 입력해 주세요", 2000);
   			}else{
   				var data = "send=id&member_two="+$("#receive-user").val()+"&reply="+$("#write-text").val();
   	   			$.ajax({
   	   				type : "post"
   	   	 		    , url : "/sendMessage"
   	   	 		    , data : data
   	   	 		    , dataType : "text"
   	   	 		    , timeout : 5000
   	   	 		    , error : function() {
   	   	 		    	alertShow("danger","다시 시도해 주세요", 2000);
   	   	 		    }
   	   	 		    , success : function(response) {
   	   	 		    	if(response == "execute"){
   	   	 		    		alertShow("success","전송되었습니다", 1200);
   	   	 		    		$("#receive-user").val("");
   	   	 		    		$("#write-text").val("");
   	   	 		    		message_back();
   	   	 		    	}else if(response == "empty"){
   	   	 		    		$("#receive-user").focus();
   	   	 		    		alertShow("info","존재하지 않는 사용자입니다<br>아이디를 확인해주세요", 4000);
   	   	 		    	}else{
   	   	 		    		alertShow("danger","다시 시도해 주세요", 2000);
   	   	 		    	}
   	   	 		    }
   	   	 		});
   			}
   		}
   	}
   	
   	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button>"+message+"</div>");
		$("body").append($el);
		if(dealy != null){
			setTimeout(function(){$el.addClass("in");},100);
			setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
		}
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
</script>
</body>
</html>